<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>emp-list-ajax</title>
      <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<h2> emp-list-ajax </h2>
名称： <input type="text" id="key">
<p>
    <button id="btnLoad">Load查询</button>
    <button id="btnGet">Get查询</button>
    <button id="btnAjax">Ajax查询</button>
</p>
    <div id="emp-list"></div>

</body>
</html>

<script>
    $(document).ready(function(){
        $('#btnLoad').click(function(){
            var name = $('#key').val();  // text 取标签里的
            $('#emp-list').load('/emp/list/?key='+ name);
        });

        $('#btnGet').click(function(){
            var name = $('#key').val();
            $.get('/emp/list/',{'key':name},function(response){
                $('#emp-list').html(response);
            });
        });

        $('#btnAjax').click(function(){
            var name = $('#key').val();
            $.ajax({
                url:'/emp/list/',
                type:'Get',
                data:{'key':name},
                success:function(response){ $('#emp-list').html(response); }
            });
        });

    });

</script>